<template>
    <div>
        
        <div>
            <h4 class="font-weight-bold" style="display:inline-block;">风控应用对象</h4>
            <div class="float-right">
                <Button type="info" class="ml-2" shape="circle" disabled icon="plus-round" @click="showModal = true">新增</Button>
            </div>
        </div>

        <b-card class="mb-4">
            <div>
                <Table :data="table.data" :columns="table.columns" :loading="table.loading" stripe border class="mt-2"></Table>
                <Page show-elevator show-total size="small" class="mt-2" :total="table.total" :current="table.currentPage"
                        @on-change="(pageNum) => {
                            let self = this;
                            table.pageChange.call(self,pageNum);
                        }"></Page>
            </div>
        </b-card>
    </div>
</template>

<style scoped></style>

<script>
export default {
    name: 'applyObjectDefList',
    data() {
        return {
            table: {
                data: [],
                columns: [
                    {
                        title: '#',
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '对象',
                        key: 'name',
                        width: 150
                    },
                    {
                        title: '描述',
                        key: 'desc'
                    },
                    {
                        title: '状态',
                        key: 'state',
                        width: 80,
                        align: 'center',
                        render: (h,context) => {
                            let stateStr = (context.row.enable === 1) ? '启用': '开发中';
                            let stateColor = (context.row.enable === 1) ? 'text-light' : 'text-success';
                            return (
                                <span class={stateColor}>{stateStr}</span>
                            )
                        }
                    }
                ],
                // 是否载入中
                loading: false,
                // 总页数
                total: 0,
                // 当前页数
                currentPage : 1,
                // 每页条目数
                pageSize : 10,
                // 分页切换
                pageChange: function(pageNum){
                    let self = this;
                    self.table.currentPage = pageNum;
                    self.loadTable().then(function(res){
                        if(res.data){
                            self.table.data = res.data.data ? res.data.data : [];
                        }
                    });
                }

                // data: [
                //     {
                //         name: '企业客户',
                //         desc: '以企业客户作为主体的风控对象，可对企业法人、企业规模等作为风控数据采集',
                //         state: 1
                //     },
                //     {
                //         name: '保理订单',
                //         desc: '以保理订单作为主体的风控对象，可对保理应收账款、卖方抵押物、买方工商处罚信息等作为风控数据采集',
                //         state: 1
                //     },
                //     {
                //         name: '应收账款',
                //         desc: '以应收账款作为主体的风控对象，可对应收账款到期日、应收账款总数等作为风控数据采集',
                //         state: 1
                //     },
                //     {
                //         name: '影视合同',
                //         desc: '以影视合同作为主体的风控对象，可对影视投资方、主演人员舆情监控等作为风控数据采集',
                //         state: 0
                //     }
                // ]
            }
        }
    },
    mounted(){
        let self = this;
        //加载客户列表
        self.loadTable().then(function(res){
            // console.log(res);
            if(res.data){
                self.table.data = res.data.data ? res.data.data : [];
            }
        });
    },
    methods: {
        loadTable(){
            let self = this;
            self.table.loading = true;

            return new Promise(function(resolve,reject){
                self.$http
                    .get('/app/v1/toolObjects',{
                        params: {
                            pageSize: 10,
                            currentPage: self.table.currentPage
                        }
                    })
                    .then(function(res) {
                        self.table.total = res.data.recordCount;
                        self.table.loading = false;
                        resolve(res);
                    },function(res){
                        self.table.loading = false;
                        reject(res);
                    });
            });
        }
    }
}
</script>
